<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/movies.css">
</head>
<body>

    <svg width="0" height="0">
        <symbol id='1' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
            <path d="M6.133 21C4.955 21 4 20.02 4 18.81v-8.802c0-.665.295-1.295.8-1.71l5.867-4.818a2.09 2.09 0 0 1 2.666 0l5.866 4.818c.506.415.801 1.045.801 1.71v8.802c0 1.21-.955 2.19-2.133 2.19z"/>
            <path d="M9.5 21v-5.5a2 2 0 0 1 2-2h1a2 2 0 0 1 2 2V21"/></g>
        </symbol>
        <symbol id='search' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11.5a7.5 7.5 0 1 1-15 0a7.5 7.5 0 0 1 15 0m-2.107 5.42l3.08 3.08"/>
        </symbol>
        <symbol id='2' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path fill="currentColor"
                d="M3 3h18v18H3zm2 2v2h2V5zm4 0v6h6V5zm8 0v2h2V5zm2 4h-2v2h2zm0 4h-2v2h2zm0 4h-2v2h2zm-4 2v-6H9v6zm-8 0v-2H5v2zm-2-4h2v-2H5zm0-4h2V9H5z" />
        </symbol>
        <symbol  id='3' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                d="m12 7l6.632-4m-7.106 4L5.368 3M3 9.154C3 7.964 3.895 7 5 7h14c1.105 0 2 .964 2 2.154v9.692c0 1.19-.895 2.154-2 2.154H5c-1.105 0-2-.964-2-2.154z" />
        </symbol>
        <symbol  id='4' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2" />
        </symbol>
        <symbol id='watch' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path fill="currentColor" d="M8 5.14v14l11-7z" />
        </symbol>
        <symbol id='add' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"
                stroke-width="1.5" d="M6 12h12m-6 6V6" />
        </symbol>
    </svg>

    <div class="bomb-box">
        <svg width="25px" height="25px" class="one">
            <use xlink:href="#1"></use>
        </svg>
        <div class="bomb-logo">
            <img src="./images/catflix.svg" alt="">
            <h3>Welecome Back</h3>
        </div>
            <form action="">
                <input type="email" id="email" placeholder="Email">
                <div class="eye">
                     <input type="password" id="password" placeholder="Password">
                    <svg  class="two" width="25px" height="25px">
                        <use xlink:href="#1"></use>
                    </svg>
                </div>
               
            </form>
        <button id="sign-in">Sign in</button>
    </div>


    <!-- 头部开始 -->
     <div class="w">
        <div class="top">
            <div class="tu">
            <a href="#"><img src="images/catflix.svg" alt=""></a>
            </div>
            <!-- nav部分 -->
            <div class="nav">
                <ul>
                    <li>
                        <a href="home.html">
                            <svg width="25px" height="25px">
                                <use xlink:href="#1"></use>
                            </svg>
                            <span>Home</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <svg width="25px" height="25px">
                                <use xlink:href="#2"></use>
                            </svg>
                            <span>Movies</span>
                        </a>
                    </li>
                    <li>
                        <a href="series.html">
                            <svg width="25px" height="25px">
                                <use xlink:href="#3"></use>
                            </svg>
                            <span>Series</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="search">
                <div class="sea">
                    <a href="">
                        <svg width="25px" height="25px">
                            <use xlink:href="#search"></use>
                        </svg>
                    <span>Search</span>
                    </a>
                </div>
                <div id="user">
                    <div class="user"> 
                        <a href="">
                            <svg width="25px" height="25px">
                            <use xlink:href="#4"></use>
                            </svg>
                        </a>
                  </div>    
                     <ul id="user-sign">
                        <li data-index="0"><span>Sign in</span></li>
                        <hr>
                        <li data-index="1"><span>Dark mode</span></li>
                    </ul>  
                </div>
            </div>
        </div>
        <!-- 头部结束 -->
        <h2 class="top_movies">
            Movies
        </h2>
        <!-- banner开始 -->
        <div class="banner-nav">

            <div class="ban-nav1">
                <a href="#">Featured</a>
            </div>
            <div class="ban-nav2">
                <a href="#">Just added</a>
            </div>
            <div class="ban-nav3">
                <a href="#">A - Z</a>
            </div>
            <div class="ban-nav4">
                <a href="#">Popular</a>
            </div>
            <div class="ban-nav5">
                <a href="#">Action</a>
            </div>
            <div class="ban-nav6">
                <a href="#">Action&Adventure</a>
            </div>
            <div class="ban-nav7">
                <a href="#">Adventure</a>
            </div>
            <div class="ban-nav8">
                <a href="#">Animation</a>
            </div>
            <div class="ban-nav9">
                <a href="#">Comedy</a>
            </div>
            <div class="ban-nav10">
                <a href="#">Crime</a>
            </div>
            <div class="ban-nav11">
                <a href="#">Documenta</a>
            </div>

        </div>
        <!-- banner结束 图片开始 -->
        
        <div class="picture">
            <div class="end-tu">
                <div class="endouttu lg-5 md-5 xl-5 sm-7">
                    <div class="tu1 ">
                        <a href="#">
                            <img src="https://image.tmdb.org/t/p/w342/tDcCVlv6oYVpRZw7IX859H3Eshn.jpg">
                        </a>
                    </div>
                    <div class="end-img1 ">
                        <div class="end-img1out">
                            <a href="#">
                                <img src="https://image.tmdb.org/t/p/w300/m0rvRn5WG7pIrtVlLe5rSRQjVu7.jpg" alt="">
                            </a> 
                            <div class="end-bot">
                                <h3>The Paino Lesson</h3>
                                <div class="end-bot-tmd">
                                    <ul>
                                        <li>
                                            <p>TMDB <i>7.2</i></p>
                                        
                                        </li>
                                        <li>
                                            <span>2024</span>
                                            <span>·</span>
                                            <span>2h</span>
                                            <span>7m</span>
                                            
                                        </li>
                                    </ul>
                                    <div class="watch">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <svg width="25px" height="25px">
                                                        <use xlink:href="#watch"></use>
                                                    </svg>
                                                    <span>Watch Now</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <svg width="40px" height="40px">
                                                        <use xlink:href="#add"></use>
                                                    </svg>
                                                </a>
                                            </li>
                                        </ul>
                                        
                                    </div>
                                    <div class="introduce">
                                        <p>
                                            A brother and sister’s battle over a prized heirloom piano unleashes haunting truths about how the past is perceived — […]
                                        </p>
                                    </div>
                                </div>
                             </div>
                        </div>
                     </div>
                </div>
                <div class="endouttu lg-5 md-5 xl-5 sm-7">
                    <div class="tu1">
                        <a href="#">
                            <img src="https://image.tmdb.org/t/p/w342/2cxhvwyEwRlysAmRH4iodkvo0z5.jpg" alt="">
                        </a>
                    </div>
                    <div class="end-img1 ">
                        <div class="end-img1out">
                            <a href="#">
                                <img src="https://image.tmdb.org/t/p/w300/8mjYwWT50GkRrrRdyHzJorfEfcl.jpg" alt="">
                            </a> 
                            <div class="end-bot">
                                <h3>The Paino Lesson</h3>
                                <div class="end-bot-tmd">
                                    <ul>
                                        <li>
                                            <p>TMDB <i>7.2</i></p>
                                        
                                        </li>
                                        <li>
                                            <span>2024</span>
                                            <span>·</span>
                                            <span>2h</span>
                                            <span>7m</span>
                                            
                                        </li>
                                    </ul>
                                    <div class="watch">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <svg width="25px" height="25px">
                                                        <use xlink:href="#watch"></use>
                                                    </svg>
                                                    <span>Watch Now</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <svg width="40px" height="40px">
                                                        <use xlink:href="#add"></use>
                                                    </svg>
                                                </a>
                                            </li>
                                        </ul>
                                        
                                    </div>
                                    <div class="introduce">
                                        <p>
                                            A brother and sister’s battle over a prized heirloom piano unleashes haunting truths about how the past is perceived — […]
                                        </p>
                                    </div>
                                </div>
                             </div>
                        </div>
                     </div>
                </div>
                
                <div class="endouttu lg-5 md-5 xl-5 sm-7">
                    <div class="tu1">
                        <a href="#">
                            <img src="https://image.tmdb.org/t/p/w342/eijfr4QiMu1ZK2XfBNd9KjoRmau.jpg" alt="">
                        </a>
                    </div>
                    <div class="end-img1 ">
                        <div class="end-img1out">
                            <a href="#">
                                <img src="https://image.tmdb.org/t/p/w300/9o29QNQh1TT0zkZfcciFFA5sUNP.jpg" alt="">
                            </a> 
                            <div class="end-bot">
                                <h3>The Paino Lesson</h3>
                                <div class="end-bot-tmd">
                                    <ul>
                                        <li>
                                            <p>TMDB <i>7.2</i></p>
                                        
                                        </li>
                                        <li>
                                            <span>2024</span>
                                            <span>·</span>
                                            <span>2h</span>
                                            <span>7m</span>
                                            
                                        </li>
                                    </ul>
                                    <div class="watch">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <svg width="25px" height="25px">
                                                        <use xlink:href="#watch"></use>
                                                    </svg>
                                                    <span>Watch Now</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <svg width="40px" height="40px">
                                                        <use xlink:href="#add"></use>
                                                    </svg>
                                                </a>
                                            </li>
                                        </ul>
                                        
                                    </div>
                                    <div class="introduce">
                                        <p>
                                            A brother and sister’s battle over a prized heirloom piano unleashes haunting truths about how the past is perceived — […]
                                        </p>
                                    </div>
                                </div>
                             </div>
                        </div>
                     </div>
                </div> 
                <div class="endouttu lg-5 md-5 xl-5 sm-7">
                    <div class="tu1">
                        <a href="#">
                            <img src="https://image.tmdb.org/t/p/w342/cdqLnri3NEGcmfnqwk2TSIYtddg.jpg" alt="">
                        </a>
                    </div>
                    <div class="end-img1 ">
                        <div class="end-img1out">
                            <a href="#">
                                <img src="https://image.tmdb.org/t/p/w300/rOmUuQEZfPXglwFs5ELLLUDKodL.jpg" alt="">
                            </a> 
                            <div class="end-bot">
                                <h3>The Paino Lesson</h3>
                                <div class="end-bot-tmd">
                                    <ul>
                                        <li>
                                            <p>TMDB <i>7.2</i></p>
                                        
                                        </li>
                                        <li>
                                            <span>2024</span>
                                            <span>·</span>
                                            <span>2h</span>
                                            <span>7m</span>
                                            
                                        </li>
                                    </ul>
                                    <div class="watch">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <svg width="25px" height="25px">
                                                        <use xlink:href="#watch"></use>
                                                    </svg>
                                                    <span>Watch Now</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <svg width="40px" height="40px">
                                                        <use xlink:href="#add"></use>
                                                    </svg>
                                                </a>
                                            </li>
                                        </ul>
                                        
                                    </div>
                                    <div class="introduce">
                                        <p>
                                            A brother and sister’s battle over a prized heirloom piano unleashes haunting truths about how the past is perceived — […]
                                        </p>
                                    </div>
                                </div>
                             </div>
                        </div>
                     </div>
                </div>
                <div class="endouttu lg-5 xl-5 md-5 sm-7">
                    <div class="tu1">
                        <a href="#">
                            <img src="https://image.tmdb.org/t/p/w342/3h6SyezeKyT7VpEHyLqckbBZuoM.jpg" alt="">
                        </a>
                    </div>
                    <div class="end-img1 ">
                        <div class="end-img1out">
                            <a href="#">
                                <img src="https://image.tmdb.org/t/p/w300/lrApdPptTXiypoENNYsJ7nPN6P1.jpg"alt="">
                            </a> 
                            <div class="end-bot">
                                <h3>The Paino Lesson</h3>
                                <div class="end-bot-tmd">
                                    <ul>
                                        <li>
                                            <p>TMDB <i>7.2</i></p>
                                        
                                        </li>
                                        <li>
                                            <span>2024</span>
                                            <span>·</span>
                                            <span>2h</span>
                                            <span>7m</span>
                                            
                                        </li>
                                    </ul>
                                    <div class="watch">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <svg width="25px" height="25px">
                                                        <use xlink:href="#watch"></use>
                                                    </svg>
                                                    <span>Watch Now</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <svg width="40px" height="40px">
                                                        <use xlink:href="#add"></use>
                                                    </svg>
                                                </a>
                                            </li>
                                        </ul>
                                        
                                    </div>
                                    <div class="introduce">
                                        <p>
                                            A brother and sister’s battle over a prized heirloom piano unleashes haunting truths about how the past is perceived — […]
                                        </p>
                                    </div>
                                </div>
                             </div>
                        </div>
                     </div>
                </div>
                <div class="endouttu lg-5 xl-5 md-5 sm-7">
                    <div class="tu1">
                            <a href="#">
                            <img src="https://image.tmdb.org/t/p/w342/e9tyjbF2rugENtBolTtEhHOXgzD.jpg" alt="">
                        </a>
                    </div>
                    <div class="end-img1 ">
                        <div class="end-img1out">
                            <a href="#">
                                <img src="https://image.tmdb.org/t/p/w300/4eMqcuVITc6iY25rRApqRFGr5VP.jpg" alt="">
                            </a> 
                            <div class="end-bot">
                                <h3>The Paino Lesson</h3>
                                <div class="end-bot-tmd">
                                    <ul>
                                        <li>
                                            <p>TMDB <i>7.2</i></p>
                                        
                                        </li>
                                        <li>
                                            <span>2024</span>
                                            <span>·</span>
                                            <span>2h</span>
                                            <span>7m</span>
                                            
                                        </li>
                                    </ul>
                                    <div class="watch">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <svg width="25px" height="25px">
                                                        <use xlink:href="#watch"></use>
                                                    </svg>
                                                    <span>Watch Now</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <svg width="40px" height="40px">
                                                        <use xlink:href="#add"></use>
                                                    </svg>
                                                </a>
                                            </li>
                                        </ul>
                                        
                                    </div>
                                    <div class="introduce">
                                        <p>
                                            A brother and sister’s battle over a prized heirloom piano unleashes haunting truths about how the past is perceived — […]
                                        </p>
                                    </div>
                                </div>
                             </div>
                        </div>
                     </div>
                </div>
                <div class="endouttu lg-5 xl-5 md-5 sm-7">
                    <div class="tu1">
                            <a href="#">
                            <img src="https://image.tmdb.org/t/p/w342/79euHUJJtfgeGU63ef38KtNjXEn.jpg" alt="">
                        </a>
                    </div>
                    <div class="end-img1 ">
                        <div class="end-img1out">
                            <a href="#">
                                <img src="https://image.tmdb.org/t/p/w300/z7JEMQuxHWZtGb1DxZ2egjOlPcb.jpg" alt="">
                            </a> 
                            <div class="end-bot">
                                <h3>The Paino Lesson</h3>
                                <div class="end-bot-tmd">
                                    <ul>
                                        <li>
                                            <p>TMDB <i>7.2</i></p>
                                        
                                        </li>
                                        <li>
                                            <span>2024</span>
                                            <span>·</span>
                                            <span>2h</span>
                                            <span>7m</span>
                                            
                                        </li>
                                    </ul>
                                    <div class="watch">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <svg width="25px" height="25px">
                                                        <use xlink:href="#watch"></use>
                                                    </svg>
                                                    <span>Watch Now</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <svg width="40px" height="40px">
                                                        <use xlink:href="#add"></use>
                                                    </svg>
                                                </a>
                                            </li>
                                        </ul>
                                        
                                    </div>
                                    <div class="introduce">
                                        <p>
                                            A brother and sister’s battle over a prized heirloom piano unleashes haunting truths about how the past is perceived — […]
                                        </p>
                                    </div>
                                </div>
                             </div>
                        </div>
                     </div>
                </div>
                <div class="endouttu lg-5 xl-5 md-5 sm-7">
                    <div class="tu1">
                            <a href="#">
                            <img src="https://image.tmdb.org/t/p/w342/tPRH0Rm00esNefnI1ZxQqTTIpzJ.jpg" alt="">
                        </a>
                    </div>
                    <div class="end-img1 ">
                        <div class="end-img1out">
                            <a href="#">
                                <img src="https://image.tmdb.org/t/p/w300/8jujdLr4OAQoWGgfNmaE4RR0mqb.jpg" alt="">
                            </a> 
                            <div class="end-bot">
                                <h3>The Paino Lesson</h3>
                                <div class="end-bot-tmd">
                                    <ul>
                                        <li>
                                            <p>TMDB <i>7.2</i></p>
                                        
                                        </li>
                                        <li>
                                            <span>2024</span>
                                            <span>·</span>
                                            <span>2h</span>
                                            <span>7m</span>
                                            
                                        </li>
                                    </ul>
                                    <div class="watch">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <svg width="25px" height="25px">
                                                        <use xlink:href="#watch"></use>
                                                    </svg>
                                                    <span>Watch Now</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <svg width="40px" height="40px">
                                                        <use xlink:href="#add"></use>
                                                    </svg>
                                                </a>
                                            </li>
                                        </ul>
                                        
                                    </div>
                                    <div class="introduce">
                                        <p>
                                            A brother and sister’s battle over a prized heirloom piano unleashes haunting truths about how the past is perceived — […]
                                        </p>
                                    </div>
                                </div>
                             </div>
                        </div>
                     </div>
                </div>
                <div class="endouttu lg-5 xl-5 md-5 sm-7">
                    <div class="tu1 ">
                            <a href="#">
                            <img src="https://image.tmdb.org/t/p/w342/blRsgsexoBqnjcEJkV8beKAVT6J.jpg" alt="">
                        </a>
                    </div>
                    <div class="end-img1 ">
                        <div class="end-img1out">
                            <a href="#">
                                <img src="https://image.tmdb.org/t/p/w300/aFDYcmwEWRiEh58Ri1tMpCUWPBp.jpg" alt="">
                            </a> 
                            <div class="end-bot">
                                <h3>The Paino Lesson</h3>
                                <div class="end-bot-tmd">
                                    <ul>
                                        <li>
                                            <p>TMDB <i>7.2</i></p>
                                        
                                        </li>
                                        <li>
                                            <span>2024</span>
                                            <span>·</span>
                                            <span>2h</span>
                                            <span>7m</span>
                                            
                                        </li>
                                    </ul>
                                    <div class="watch">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <svg width="25px" height="25px">
                                                        <use xlink:href="#watch"></use>
                                                    </svg>
                                                    <span>Watch Now</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <svg width="40px" height="40px">
                                                        <use xlink:href="#add"></use>
                                                    </svg>
                                                </a>
                                            </li>
                                        </ul>
                                        
                                    </div>
                                    <div class="introduce">
                                        <p>
                                            A brother and sister’s battle over a prized heirloom piano unleashes haunting truths about how the past is perceived — […]
                                        </p>
                                    </div>
                                </div>
                             </div>
                        </div>
                     </div>
                </div>
                <div class="endouttu lg-5 xl-5 md-5 sm-7">
                    <div class="tu1">
                            <a href="#">
                            <img src="https://image.tmdb.org/t/p/w342/wTnV3PCVW5O92JMrFvvrRcV39RU.jpg" alt="">
                        </a>
                    </div>
                    <div class="end-img1 ">
                        <div class="end-img1out">
                            <a href="#">
                                <img src="https://image.tmdb.org/t/p/w300/v9acaWVVFdZT5yAU7J2QjwfhXyD.jpg" alt="">
                            </a> 
                            <div class="end-bot">
                                <h3>The Paino Lesson</h3>
                                <div class="end-bot-tmd">
                                    <ul>
                                        <li>
                                            <p>TMDB <i>7.2</i></p>
                                        
                                        </li>
                                        <li>
                                            <span>2024</span>
                                            <span>·</span>
                                            <span>2h</span>
                                            <span>7m</span>
                                            
                                        </li>
                                    </ul>
                                    <div class="watch">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <svg width="25px" height="25px">
                                                        <use xlink:href="#watch"></use>
                                                    </svg>
                                                    <span>Watch Now</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <svg width="40px" height="40px">
                                                        <use xlink:href="#add"></use>
                                                    </svg>
                                                </a>
                                            </li>
                                        </ul>
                                        
                                    </div>
                                    <div class="introduce">
                                        <p>
                                            A brother and sister’s battle over a prized heirloom piano unleashes haunting truths about how the past is perceived — […]
                                        </p>
                                    </div>
                                </div>
                             </div>
                        </div>
                     </div>
                </div>
                <div class="endouttu lg-5 xl-5 md-5 sm-7">
                    <div class="tu1">
                            <a href="#">
                            <img src="https://image.tmdb.org/t/p/w342/iHPIBzrjJHbXeY9y7VVbEVNt7LW.jpg" alt="">
                        </a>
                    </div>
                    <div class="end-img1 ">
                        <div class="end-img1out">
                            <a href="#">
                                <img src="https://image.tmdb.org/t/p/w300/zViRwl3ySscZnbXZJ2Q9wq3SeUG.jpg" alt="">
                            </a> 
                            <div class="end-bot">
                                <h3>The Paino Lesson</h3>
                                <div class="end-bot-tmd">
                                    <ul>
                                        <li>
                                            <p>TMDB <i>7.2</i></p>
                                        
                                        </li>
                                        <li>
                                            <span>2024</span>
                                            <span>·</span>
                                            <span>2h</span>
                                            <span>7m</span>
                                            
                                        </li>
                                    </ul>
                                    <div class="watch">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <svg width="25px" height="25px">
                                                        <use xlink:href="#watch"></use>
                                                    </svg>
                                                    <span>Watch Now</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <svg width="40px" height="40px">
                                                        <use xlink:href="#add"></use>
                                                    </svg>
                                                </a>
                                            </li>
                                        </ul>
                                        
                                    </div>
                                    <div class="introduce">
                                        <p>
                                            A brother and sister’s battle over a prized heirloom piano unleashes haunting truths about how the past is perceived — […]
                                        </p>
                                    </div>
                                </div>
                             </div>
                        </div>
                     </div>
                </div>
                <div class="endouttu lg-5 xl-5 md-5 sm-7">
                    <div class="tu1">
                        <a href="#">
                            <img src="https://image.tmdb.org/t/p/w342/29uKScAbQuKsMEdAn12a6BmvFn7.jpg" alt="">
                        </a>
                    </div>
                    <div class="end-img1 ">
                        <div class="end-img1out">
                            <a href="#">
                                <img src="https://image.tmdb.org/t/p/w300/jT4KqFTrR2ofpUUwzKCIn4uYWXp.jpg" alt="">
                            </a> 
                            <div class="end-bot">
                                <h3>The Paino Lesson</h3>
                                <div class="end-bot-tmd">
                                    <ul>
                                        <li>
                                            <p>TMDB <i>7.2</i></p>
                                        
                                        </li>
                                        <li>
                                            <span>2024</span>
                                            <span>·</span>
                                            <span>2h</span>
                                            <span>7m</span>
                                            
                                        </li>
                                    </ul>
                                    <div class="watch">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <svg width="25px" height="25px">
                                                        <use xlink:href="#watch"></use>
                                                    </svg>
                                                    <span>Watch Now</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <svg width="40px" height="40px">
                                                        <use xlink:href="#add"></use>
                                                    </svg>
                                                </a>
                                            </li>
                                        </ul>
                                        
                                    </div>
                                    <div class="introduce">
                                        <p>
                                            A brother and sister’s battle over a prized heirloom piano unleashes haunting truths about how the past is perceived — […]
                                        </p>
                                    </div>
                                </div>
                             </div>
                        </div>
                     </div>
                </div>
            </div>
        
        <!-- more开始 -->
         <div class="more">
            <a href="#">Load more</a>
         </div>

         <div class="foot-nav">
            <img src="images/catflix.svg" alt="">
            <div class="home">
                <ul class="">
                    <li><a href="home.html">Home</a></li>
                    <li><a href="#">Movies</a></li>
                    <li><a href="series.html">Series</a></li>
                    <li><a href="">Search</a></li>
                </ul>
            </div>
            <div class="home1">
                <ul class="">
                    <li><a href="">Distv+2023</a></li>
                    <li><a href="home.html">Home</a></li>
                    <li><a href="">Movies</a></li>
                    <li><a href="series.html">Series</a></li>
                    <li><a href="">Search</a></li>
                </ul>
            </div>
         </div>

         <!-- foot开始 -->
         <div class="foot">
            <div class="foot-home">
                <a href="home.html">
                    <svg width="25px" height="25px">
                        <use xlink:href="#1"></use>
                    </svg>
                    Home
                </a>
            </div>
            <div class="foot-mov">
                <a href="#">
                    <svg width="25px" height="25px">
                        <use xlink:href="#2"></use>
                    </svg>
                    Movies
                </a>
            </div>
            <div class="foot-ser">
                <a href="series.html">
                    <svg width="25px" height="25px">
                        <use xlink:href="#3"></use>
                    </svg>
                    Series
                </a>
            </div>
            <div class="foot-search">
                <a href="#">
                    <svg width="25px" height="25px">
                        <use xlink:href="#search"></use>
                    </svg>
                    Search
                </a>
            </div>
            
         </div>
    </div>    
</body>
<script src="./src/movies.js"></script>
</html>
